<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Serialization</title>
    <script src="../dist/quark-renderer.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
    <div id="main" style="width:100%;height:800px;"></div>
    <div>
        <button id="tojson">toJSONObject()</button>
        <button id="fromjson">fromJSONObject()</button>
    </div>
    <script type="text/javascript">
        let dataStr='[{"id":"el-d89fcd2c-f23c-44b6-b3a3-5845fb74a47b","name":"","type":"image","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":true,"position":[431,484],"shape":{},"style":{"image":"./data/test.png","width":200,"height":200,"x":0,"y":0},"linkable":true},{"id":"el-b6907756-056e-495c-0f18-2734c6199b37","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[50,50],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#ff0000","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true},{"id":"el-6a6e21d1-9a12-4766-9de4-713887c86109","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[300,50],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#ff0000","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true},{"id":"el-914bfa3d-dcce-47b4-1f1a-db2975740863","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[300,200],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#ff0000","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true},{"id":"el-725c6e84-1086-4ea2-3641-633f5d15213e","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[50,300],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#ff0000","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true},{"id":"el-f33ef6ce-a489-400c-85e7-14b0a2feec32","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[50,500],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#ff0000","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true},{"id":"el-97ce8228-c7f4-452f-0960-cf6574faafbe","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[300,400],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#ff0000","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true},{"id":"el-33393a8e-f596-4b4d-396c-c13e7faa74f1","name":"","type":"group","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[429,-1],"shape":{"r":0,"x":0,"y":0,"width":400,"height":200},"style":{"fill":"#0033ff"},"linkable":true,"children":[{"id":"el-aebe2824-abff-4cd2-bc6a-56c0d183c0b6","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[10,10],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#FA8072","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true}]},{"id":"el-aebe2824-abff-4cd2-bc6a-56c0d183c0b6","name":"","type":"rect","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[51,158],"shape":{"r":0,"x":0,"y":0,"width":50,"height":50},"style":{"fill":"#FA8072","lineWidth":5,"text":"矩形","textPosition":"inside","font":null,"textAlign":null},"linkable":true},{"id":"el-7b6217ef-60f8-4769-ba7e-8cdd6e683bfe","name":"","type":"group","ignore":false,"invisible":false,"draggable":true,"transformable":true,"hasTransformControls":false,"showTransformControls":false,"position":[429,244],"shape":{"r":0,"x":0,"y":0,"width":400,"height":200},"style":{"fill":"#ff3300"},"linkable":true,"children":[]},{"id":"el-fa34f44a-d589-4f2e-25c5-93e87be499fc","name":"","type":"line","ignore":false,"invisible":false,"draggable":true,"transformable":false,"hasTransformControls":false,"showTransformControls":false,"position":[115,343],"shape":{"x1":514,"y1":-99,"x2":514,"y2":-144,"percent":1},"style":{"stroke":"rgba(20, 220, 60, 0.8)","fill":null,"lineWidth":2},"fromId":"el-7b6217ef-60f8-4769-ba7e-8cdd6e683bfe","toId":"el-33393a8e-f596-4b4d-396c-c13e7faa74f1","fromPosition":"T","toPosition":"B","isCable":true},{"id":"el-37f463a4-0663-49c0-b57f-b854aa3cb5a2","name":"","type":"visio","ignore":false,"invisible":false,"draggable":true,"transformable":false,"hasTransformControls":false,"showTransformControls":false,"position":[0,0],"shape":{"x1":0,"y1":0,"x2":0,"y2":0,"percent":1,"points":[[350,225],[380,225],[380,275],[20,275],[20,325],[50,325]],"smooth":false,"smoothConstraint":null},"style":{"stroke":"#000","fill":null,"lineWidth":2},"fromId":"el-914bfa3d-dcce-47b4-1f1a-db2975740863","toId":"el-725c6e84-1086-4ea2-3641-633f5d15213e","fromPosition":"R","toPosition":"L","isCable":true},{"id":"el-0de84bfd-ae37-4224-2efe-868b5b8e4be5","name":"","type":"visio","ignore":false,"invisible":false,"draggable":true,"transformable":false,"hasTransformControls":false,"showTransformControls":false,"position":[0,0],"shape":{"x1":0,"y1":0,"x2":0,"y2":0,"percent":1,"points":[[100,525],[130,525],[130,425],[270,425],[300,425]],"smooth":false,"smoothConstraint":null},"style":{"stroke":"#000","fill":null,"lineWidth":2},"fromId":"el-f33ef6ce-a489-400c-85e7-14b0a2feec32","toId":"el-97ce8228-c7f4-452f-0960-cf6574faafbe","fromPosition":"R","toPosition":"L","isCable":true}]';

        let qr = QuarkRenderer.init(document.getElementById('main'));

        document.querySelector('#tojson').addEventListener('click',()=>{
            console.log(qr.toJSONObject());
            console.log(JSON.stringify(qr.toJSONObject()));
        });

        document.querySelector('#fromjson').addEventListener('click',()=>{
            qr.fromJSONObject(JSON.parse(dataStr));
        });
    </script>

</body>
</html>